<template>
  <div class="test-login-page">
    <h1>测试登录</h1>
    <p>此页面仅用于开发测试，可以选择不同的用户角色进行模拟登录</p>

    <div class="form-group">
      <label>用户名</label>
      <input v-model="username" type="text" placeholder="输入任意用户名">
    </div>

    <div class="form-group">
      <label>选择角色</label>
      <select v-model="role">
        <option value="user">普通用户</option>
        <option value="distributor">区域代理</option>
        <option value="agent">业务员</option>
        <option value="admin">管理员</option>
      </select>
    </div>

    <button @click="handleLogin" class="login-btn">模拟登录</button>

    <div v-if="currentUser" class="user-info">
      <h2>当前登录信息</h2>
      <p><strong>用户名:</strong> {{ currentUser.name }}</p>
      <p><strong>角色:</strong> {{ currentUser.role }}</p>
      <button @click="handleLogout" class="logout-btn">退出登录</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { showToast } from 'vant'
import { login } from '@/api/index'

const router = useRouter()
const userStore = useUserStore()

const username = ref('')
const role = ref('distributor') // 默认选择经销商角色

const currentUser = computed(() => userStore.currentUser)

// 模拟登录
const handleLogin = () => {
  if (!username.value) {
    showToast('请输入用户名')
    return
  }

  // 创建模拟用户对象
   const mockUser = {
    id: 'test-' + Date.now(),
    name: username.value,
    email: `${username.value}@example.com`,
    role: role.value,
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
  }

  // 模拟token
  const mockToken = 'test-token-' + Date.now()

  // 设置用户和token
  userStore.setUser(mockUser)
  userStore.setToken(mockToken)

  // 保存到localStorage便于持久化
  localStorage.setItem('user', JSON.stringify(mockUser))

  showToast(`已成功以${role.value}角色登录`)

  // 不同角色导航到不同页面
  if (role.value === 'distributor') {
    router.push('/distributor/dashboard')
  } else if (role.value === 'admin') {
    router.push('/admin/dashboard')
  } else {
    router.push('/')
  }
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
  showToast('已退出登录')
  router.push('/login')
}

// 页面加载时检查用户状态
onMounted(() => {
  userStore.checkAuth()
})
</script>

<style scoped>
.test-login-page {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h1 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #333;
}

p {
  color: #666;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

input, select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

.login-btn:hover {
  background-color: #dc2626;
}

.user-info {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.user-info h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.logout-btn {
  padding: 8px 16px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.logout-btn:hover {
  background-color: #e5e7eb;
}
</style>
